@import "common.styl"
.upload
  &,& li
    margin 0
    padding 0
    list-style-type none


.upload
  border 1px solid #d7d7d7
  padding 15px 5px 5px 15px
  zoom 1
  position relative
  width 100%


.upload:after
  display block
  clear both
  content ""
  visibility hidden
  height 0


.upload .item
  width 150px
  height 120px
  float left
  margin 0 10px 10px 0
  background #f8f8f8
  position relative
  border-radius 4px
  background-size contain
  background-position center center
  background-repeat no-repeat
  border 1px solid #d7d7d7
  overflow hidden


.upload .item .filename
  font-size 12px
  width 90%
  left 5%
  position absolute
  top 70%
  line-height 1.3em
  height 2.6em
  overflow hidden
  text-align center


.upload .item.error
  border-color #f20


.upload .item.error::after
  content ""
  background rgba(255, 255, 255, .8)
  position absolute
  width 100%
  height 100%
  z-index 9
  display block
  line-height 100%
  text-align center


.upload .item.error::before
  content attr(data-error)
  position absolute
  padding 10px
  z-index 10
  display block
  font-size 12px
  color #f20
  top 0


.upload .item svg.icon
  position absolute
  height 40%
  top 20%
  left 0
  width 100%


.upload .item svg.progress
  position absolute
  bottom 0
  width 100%
  height 50%


.upload .item .progressnum
  width 40px
  height 40px
  border-radius 40px
  text-align center
  line-height 40px
  font-size 12px
  color #fff
  position absolute
  left 50%
  margin-left -20px
  top 50%
  margin-top -20px
  background rgba(17, 89, 164, 0.5)


.upload .item.add svg
  top 30%


.upload .item.success:after
  position absolute
  background rgba(0, 0, 0, .6)
  content ""
  left 0
  right 0
  top 0
  bottom 0
  opacity 0
  transition all .3s


.upload .item.success:hover::after
  opacity 1


.upload .item.success svg.delete, .upload .item.success svg.look
  position absolute
  height 30px
  top 50%
  margin-top -15px
  left 50%
  color #fff
  z-index 10
  transition all .3s
  cursor pointer


.upload .item.success svg.delete
  margin-left -35px
  height 26px
  margin-top -14px
  left -30px


.upload .item.success svg.look
  margin-left 10px
  left 105%


.upload .item.success:hover svg.delete
  margin-left -35px
  left 50%
  height 26px
  margin-top -14px
  transition all .3s


.upload .item.success:hover svg.look
  margin-left 10px
  left 50%
  transition all .3s


.upload .item.delete
  opacity .2
  transition all .3s


.upload input[type='file']
  display none


.upload.multiple.empty
  height 160px
  width 100%


.upload.multiple.empty .add
  width 100%
  position absolute
  top 50%
  margin-top -30px
  height 36px
  background 0
  border 0
  left 0
  overflow inherit


.upload.multiple.empty .add::after
  content "点击上传文件"
  width 180px
  position absolute
  height 36px
  background #0e90d2
  left 50%
  margin-left -90px
  display block
  z-index 9
  visibility visible
  text-align center
  color #fff
  line-height 36px
  font-size 14px
  border 0 none
  border-radius 0


.upload.multiple.empty .add:hover::after
  background-color #0a70c2


.upload.multiple.empty .add svg
  display none


.upload.multiple.empty .add::before
  content "或者将文件拖到此处,最多可以上传 " attr(data-num) " 个" attr(data-type) "格式文件"
  width 100%
  text-align center
  position absolute
  bottom -30px
  font-size 12px
  margin-top 14px
  left 0
  color #999
  white-space nowrap


.upload.one
  width 150px
  height 150px
  padding 0


.upload.one li
  height 100%
  width 100%
  margin 0
  padding 0


.upload.one li.add svg
  opacity 0
  transition all .3s
  margin-top -30px


.upload.one li.add:hover svg
  opacity 1
  transition all .3s


.upload.one.empty li.add svg
  opacity 1
  transition all .3s


.upload.one .item
  border 0 none
  border-radius 0


.upload.one .add
  position absolute
  top 30px
  right 0
  left 0
  background 0


.upload.one .item.success svg.delete, .upload.one .item.success svg.look
  top 0
  margin-top 5px


.upload.one .item.success svg.look
  margin-top 3px


.upload.dragenter
  border 2px dashed #d7d7d7
  box-shadow 0 1px 5px rgba(0, 0, 0, .7)
  display table


.upload.dragenter::after
  content ""
  background rgba(255, 255, 255, .9)
  z-index 998
  position absolute
  left 0
  top 0
  height 100%
  width 100%
  vertical-align middle
  display table-cell
  visibility visible


.upload.dragenter::before
  content "将文件拖到这里上传"
  position absolute
  width 100%
  top 50%
  z-index 999
  width 100%
  text-align center
  margin-top -12px
  color #999
